<script setup>
import { ref } from 'vue'
import { postPatientRes, getAiCard } from '@/apis/apis.js'
import { showToast, formatDate } from '@/utils/utils.js'
const name = ref('')
const id_card = ref('')
const phone = ref('')
const gender = ref('')
const date = ref('')
const relation = ref('')
const handleChangeGender = ({ detail: { value } }) => {
  gender.value = value === '0' ? '男' : '女'
}
const handleChangeDate = ({ detail: { value } }) => {
  date.value = value
}
const handleChangeRelation = ({ detail: { value } }) => {
  switch(parseInt(value)) {
    case 0:
      relation.value = '自己'
      break
    case 1:
      relation.value = '父母'
      break
    case 2:
      relation.value = '其他'
      break
  }
}
const handleCancel = () => {
  uni.navigateBack()
}
const handleSubmit = async () => {
  const data = {
    name: name.value,
    phone: phone.value,
    id_card: id_card.value,
    sex: gender.value,
    relation: relation.value,
    born: date.value
  }
  console.log(data)
  const res = await postPatientRes(data)
  console.log(res)
  showToast('添加成功')
  setTimeout(() => {
    uni.navigateBack()
  }, 1000)
}
const handleAI = async () => {
  let res = await uni.chooseMedia({
    count: 1,
    mediaType: ['image'],
    sourceType: ['album'],
    sizeType: ['compressed']
  })
  res = await uni.uploadFile({
    url: import.meta.env.VITE_API_URL + '/ai_card',
    filePath: res.tempFiles[0].tempFilePath,
    name: 'file',
    header: {
      accept: 'application/json'
    }
  })
  console.log(JSON.parse(res.data))
  if (JSON.parse(res.data).msg === 'SUCCESS') {
    name.value = JSON.parse(res.data).data.name
    id_card.value = JSON.parse(res.data).data.id_card
    gender.value = JSON.parse(res.data).data.sex
    date.value = formatDate(JSON.parse(res.data).data.born)
  }
}
</script>

<template>
  <view class="view">
    <view class="view-body">
      <view class="view-ai" @click="handleAI">
        <image class="view-ai-image" src="/static/images/AI-shibie.svg" mode="aspectFill"></image>
        <view class="view-ai-tip">身份证智能识别</view>
      </view>
      <view class="view-form">
        <view class="view-form-item">
          <view class="view-form-label">真实姓名</view>
          <input class="view-form-input" placeholder="请输入姓名" v-model.trim="name" />
        </view>
        <view class="view-form-item">
          <view class="view-form-label">性别</view>
          <picker class="view-form-picker" mode="selector" :range="['男', '女']" @change="handleChangeGender">
            <view class="view-form-container" v-if="gender === ''">
              <view class="view-form-placeholder">请选择性别</view>
              <image class="view-form-image" src="/static/images/more.svg" mode="widthFix"></image>
            </view>
            <view class="view-form-container" v-else>
              <view class="view-form-placeholder">{{ gender }}</view>
            </view>
          </picker>
        </view>
        <view class="view-form-item">
          <view class="view-form-label">出生日期</view>
          <picker class="view-form-picker" mode="date" @change="handleChangeDate">
            <view class="view-form-container" v-if="date === ''">
              <view class="view-form-placeholder">请选择出生日期</view>
              <image class="view-form-image" src="/static/images/more.svg" mode="widthFix"></image>
            </view>
            <view class="view-form-container" v-else>
              <view class="view-form-placeholder">{{ date }}</view>
            </view>
          </picker>
        </view>
        <view class="view-form-item">
          <view class="view-form-label">成员关系</view>
          <picker class="view-form-picker" mode="selector" :range="['自己', '父母', '其他']" @change="handleChangeRelation">
            <view class="view-form-container" v-if="relation === ''">
              <view class="view-form-placeholder">请选择与成员关系</view>
              <image class="view-form-image" src="/static/images/more.svg" mode="widthFix"></image>
            </view>
            <view class="view-form-container" v-else>
              <view class="view-form-placeholder">{{ relation }}</view>
            </view>
          </picker>
        </view>
        <view class="view-form-item">
          <view class="view-form-label">身份证</view>
          <input class="view-form-input" type="idcard" placeholder="请输入身份证" v-model.trim="id_card" />
        </view>
        <view class="view-form-item">
          <view class="view-form-label">手机号</view>
          <input class="view-form-input" type="tel" placeholder="请输入手机号" v-model.trim="phone" />
        </view>
      </view>
    </view>
    <view class="view-footer">
      <view class="view-footer-cancel" @click="handleCancel">取消</view>
      <view class="view-footer-submit" @click="handleSubmit">确认添加</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.view {
  min-height: 100vh;
  background-color: #f8f8f8;
  .view-body {
    padding-top: 20rpx;
    .view-form {
      padding: 0 20rpx;
      background-color: #fff;
      .view-form-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 40rpx 0;
        border-bottom: 1px solid #f8f8f8;
        .view-form-label {}
        .view-form-input {
          text-align: end;
        }
        .view-form-picker {
          .view-form-container {
            display: flex;
            align-items: center;
            .view-form-placeholder {
              margin-right: 10rpx;
            }
            .view-form-image {
              width: 30rpx;
              height: 30rpx;
            }
          }
        }
      }
    }
    .view-ai {
      display: flex;
      align-items: center;
      margin: 0 20rpx 20rpx;
      padding: 20rpx;
      background-color: #fff;
      border-radius: 10rpx;
      .view-ai-image {
        margin-right: 20rpx;
        width: 80rpx;
        height: 80rpx;
      }
    }
  }
  .view-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    padding-bottom: env(safe-area-inset-bottom);
    width: 750rpx;
    background-color: #fff;
    .view-footer-cancel {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20rpx 0;
      width: 325rpx;
      background-color: #ecf3fe;
      border-radius: 10rpx;
      color: #4376e4;
    }
    .view-footer-submit {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20rpx 0;
      width: 325rpx;
      background-color: #4376e4;
      border-radius: 10rpx;
      color: #fff;
    }
  }
}
</style>
